import React from "react";
import Qs from 'qs'
import axios from "../../../../http";
import {NavBar, Toast} from "antd-mobile";
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    DatePicker,

    Picker,
} from 'antd-mobile';
import dayjs from 'dayjs';

import {withRouter} from "react-router";
import {PRIVATE_ROUTE} from "../../../../route.constants";
class ScheduleEdit extends React.Component {


    constructor(props) {

        super(props);

        this.state={
            startDatePickerVisible:false,
            endDatePickerVisible:false,
            startTimePickerVisible:false,
            endTimePickerVisible:false,
            userViewList:[],
            title:'',
            memo:'',
            startDate:'',
            endDate:'',
            startTime:[],
            endTime:[],
            // mobile version add remind Time function
            remindTime:'NEVER',
            remindTimeName:'从不',
            remindTimePickerVisible:false
        };

    }

    getUserIds=()=>{
        let userIds=new Array()
        let participant= this.state.userViewList;
        for(let i=0;i<participant.length;i++){
            let p=participant[i];
            let userId=p.substring(p.indexOf('_')+1,p.length);
            userIds.push(userId)
        }
        return userIds;
    }

    getUserRealNames=()=>{
        let userIds=new Array()
        let participant= this.state.userViewList;
        for(let i=0;i<participant.length;i++){
            let p=participant[i];
            let userId=p.substring(0,p.indexOf('_'));
            if(i!=0){
                userIds.push(';')
            }
            userIds.push(userId)
        }
        return userIds;
    }
     startTimeColumns = [
        ['00','01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
        ['00','10', '20', '30', '40', '50']
    ]

    endTimeColumns = [
        ['00','01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
        ['10', '20', '30', '40', '50', '59']
    ]
    getSelectOptions=()=>{

        return ([
            [{value:"NEVER", label:"从不"},
           {value:"BEFORE_TEN_MINUTE", label:"提前十分钟"},
           {value:"BEFORE_HALF_HOUR", label:"提前半小时"},
           {value:"BEFORE_ONE_HOUR", label:"提前一小时"},
           {value:"BEFORE_ONE_DAY", label:"提前一天"},
           {value:"BEFORE_THREE_DAY", label:"提前三天"},
           {value:"BEFORE_FIVE_DAY", label:"提前五天"},
           {value:"BEFORE_TEN_DAY", label:"提前十天"}]
        ]
           )
      }

    getStart=()=>{
       return  this.state.startDate+' '+this.state.startTime[0]+":"+this.state.startTime[1]+":"+'00';
    }
    getEnd=()=>{
        return  this.state.endDate+' '+this.state.endTime[0]+":"+this.state.endTime[1]+":"+'00';
    }
    update=() =>{
        let entity={id:this.state.originId,title:this.state.title,start:this.getStart(),end:this.getEnd(),memo:this.state.memo,userIds:this.getUserIds(),remindTime:this.state.remindTime[0]};
        axios.post('api/oa/work/event/update', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                let icon= 'success';
                if(data.status!=1){
                    icon= 'fail';
                }
                Toast.show({
                    icon: icon,
                    content: data.message,
                });
            })
            .catch(function (error) {
                Toast.show({
                    icon: 'fail',
                    content: error,
                });
            });

    }

    deleteById=()=> {
        axios.post('api/oa/work/event/deleteById', Qs.stringify({
            id:this.state.originId
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{

                let  data=response.data;
                let icon= 'success';
                if(data.status!=1){
                    icon= 'fail';
                }
                Toast.show({
                    icon: icon,
                    content: data.message,
                });
                if(data.status==1){
                    this.props.history.push({ pathname: "/main/"+PRIVATE_ROUTE.APP_OA_WORK_SCHEDULE_MINE });
                }

            })
            .catch(function (error) {
                Toast.show({
                    icon: 'fail',
                    content: error,
                });
            });

    }
    componentDidMount() {
        console.log(this)
        if(this.props.location.state!=undefined){
            this.setState(this.props.location.state);
        }
    }

    render(){
        return(
            <>
                <NavBar onBack={()=>{this.props.history.push({ pathname: "/main/"+PRIVATE_ROUTE.APP_OA_WORK_SCHEDULE_MINE })}} >编辑事件</NavBar>

                <Form
                    footer={
                        [<Button  type='submit' color='primary' onClick={this.update}>
                            提交
                        </Button>,
                        <Button  color='danger'

                                 onClick={() => {
                                     Dialog.show({
                                         content: '确定要执行删除操作吗？',
                                         closeOnAction: true,
                                         actions: [
                                             [
                                                 {
                                                     key: 'cancel',
                                                     text: '取消',
                                                 },
                                                 {
                                                     key: 'delete',
                                                     text: '删除',
                                                     bold: true,
                                                     danger: true,
                                                     onClick:()=>{this.deleteById()}
                                                 },
                                             ],
                                         ],
                                     })

                                 }}

                        >删除</Button>]
                    }
                >

                    <Form.Item
                        label='事件名称：'
                        rules={[{ required: true, message: '事件名称不能为空' }]}
                    >
                        <Input placeholder='请输事件名称' value={this.state.title} onChange={(value)=>{this.setState({title:value})}} />
                    </Form.Item>

                    <Form.Item
                        label='开始日期'
                        trigger='onConfirm'
                        onClick={() => {
                            this.setState({startDatePickerVisible:true})
                        }}
                    >
                        <DatePicker
                            visible={this.state.startDatePickerVisible}
                            onClose={() => {
                                this.setState({startDatePickerVisible:false})
                            }}
                            min={new Date()}
                            onConfirm={(value)=>{this.setState({startDate:dayjs(value).format('YYYY-MM-DD')})}}
                        >

                        </DatePicker>
                        {
                            this.state.startDate ? dayjs(this.state.startDate).format('YYYY-MM-DD') : '请选择'
                        }
                    </Form.Item>
                    <Form.Item
                        label='开始时间'
                        trigger='onConfirm'
                        onClick={() => {
                            this.setState({startTimePickerVisible:true})
                        }}
                    >
                        <Picker
                            columns={this.startTimeColumns}
                            visible={this.state.startTimePickerVisible}
                            onClose={() => {
                                this.setState({startTimePickerVisible:false})
                            }}
                            value={this.state.startTime}
                            onConfirm={(value) => {
                                this.setState({startTime:value})
                            }}
                            onSelect={(val, extend) => {
                                console.log('onSelect', val, extend.items)
                            }}
                        >
                        </Picker>
                        {this.state.startTime.length==0?'请选择':this.state.startTime[0]+":"+this.state.startTime[1]+":"+'00'}
                    </Form.Item>


                    <Form.Item
                        label='结束日期'

                        onClick={() => {
                            this.setState({endDatePickerVisible:true})
                        }}
                    >
                        <DatePicker
                            visible={this.state.endDatePickerVisible}
                            onClose={() => {
                                this.setState({endDatePickerVisible:false})
                            }}
                            min={new Date()}
                            onConfirm={(value)=>{this.setState({endDate:dayjs(value).format('YYYY-MM-DD')})}}
                        >

                        </DatePicker>
                        { this.state.endDate ? dayjs(this.state.endDate).format('YYYY-MM-DD') : '请选择'
                        }
                    </Form.Item>
                    <Form.Item
                        label='结束时间'
                        onClick={() => {
                            this.setState({endTimePickerVisible:true})
                        }}
                    >
                        <Picker
                            columns={this.endTimeColumns}
                            visible={this.state.endTimePickerVisible}
                            onClose={() => {
                                this.setState({endTimePickerVisible:false})
                            }}
                            value={this.state.endTime}
                            onConfirm={(value) => {
                                this.setState({endTime:value})
                            }}
                            onSelect={(val, extend) => {

                            }}
                        >
                        </Picker>
                        {this.state.endTime.length==0?'请选择':this.state.endTime[0]+":"+this.state.endTime[1]+":"+'00'}
                    </Form.Item>

                    <Form.Item  label='参与人:' onClick={()=>{this.props.history.push({pathname:"/main/"+PRIVATE_ROUTE.APP_OA_USER_CHECKBOX_LIST,state:this.state})}}>
                        {this.state.userViewList.length==0?'请选择':this.getUserRealNames()}
                    </Form.Item>

                    <Form.Item  label='备注:'>
                        <TextArea placeholder='' value={this.state.memo} maxLength={200} rows={4} onChange={(value)=>{this.setState({memo:value})}} />
                    </Form.Item>
                    <Form.Item
                        label='请选择提醒时间:'
                        trigger='onConfirm'
                        onClick={() => {
                            this.setState({remindTimePickerVisible:true})
                        }}
                    >
                        <Picker
                            columns={this.getSelectOptions()}
                            visible={this.state.remindTimePickerVisible}
                            onClose={() => {
                                this.setState({remindTimePickerVisible:false})
                            }}
                            value={this.state.remindTime}
                            onConfirm={(value,extend) => {
                                
                                this.setState({remindTime:value,remindTimeName:extend.items[0].label})
                                console.log('confirm',extend.items[0].label)
                            }}
                            onSelect={(val, extend) => {
                                console.log('onSelect', val, extend.items)
                                console.log(extend.items[0].label)
                            }}
                        >
                        </Picker>

                        {this.state.remindTime.length==0?'请选择':this.state.remindTimeName}
                    </Form.Item>
                </Form>
            </>


        )


    }
}

export default withRouter(ScheduleEdit)